<template>
    <div class="ratingselect">
        <div class="selectType border-1px">
            <span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
            <span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
            <span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}<span class="count">{{negatives.length}}</span></span>
        </div>
        <div class="switch" @click="toggleContent" :class="{'on':onlyContent}">
            <span class="icon-check_circle"></span>
            <span class="text">只看有内容的评价</span>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
const POSITIVE = 0;
const NEGATIVE = 1;
const ALL = 2;
export default {
    props: {
        ratings: {
            type: Array,
            default () {
                return [];
            }
        },
        onlyContent: {
            type: Boolean,
            default () {
                return true;
            }
        },
        desc: {
            type: Object,
            default () {
                return {
                    all: '全部',
                    positive: '满意',
                    negative: '不满意'
                };
            }
        },
        selectType: {
            type: Number,
            default () {
                return ALL;
            }
        }
    },
    methods: {
        select (type, event) {
            if (!event._constructed) {
                return;
            }
            this.$emit('select', type);
        },
        toggleContent (event) {
            if (!event._constructed) {
                return;
            }
            this.$emit('toggle');
        }
    },
    computed: {
        positives () {
            return this.ratings.filter((rating) => {
                return rating.rateType === POSITIVE;
            });
        },
        negatives () {
            return this.ratings.filter((rating) => {
                return rating.rateType === NEGATIVE;
            });
        }
    }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl'
.ratingselect
    background :#fff
    margin-top: 6px
    .selectType
        margin :0 18px
        padding :18px 0
        font-size :0
        border-1px(rgba(7,17,27,0.1))
        .block
            padding :8px 12px
            font-size :12px
            line-height :16px
            border-radius :1px
            color :rgb(77,85,93)
            &.active
                color :#fff
            .count
                margin-left :2px
                font-size :8px
            &.positive
                background-color :rgba(0,160,220,0.2)
                margin-right :8px
                &.active
                    background-color :rgb(0,160,220)
            &.negative
                background-color :rgba(77,85,93,0.2)
                &.active
                    background-color :#4d555d
    .switch
        padding :12px 18px
        font-size :0
        line-height :24px
        color :rgb(147,153,159)
        border-bottom :solid 1px rgba(147,153,159,0.1)
        &.on
            .icon-check_circle
                color: #00c850
        .icon-check_circle
            display :inline-block
            vertical-align :top
            margin-right :4px
            color :rgb(147,153,159)
            font-size :24px
        .text
            display :inline-block
            vertical-align :top
            font-size :12px
</style>
